﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="eCommerce.cms.shop.test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<script src="../jquery.js"></script>
<script src="../jquery.plum.js"></script>
<script src="plum.shop.js"></script>
<script src="example-plum-shop-configuration.js"></script>
<head runat="server">
    <title>plum.shop, the JavaScript shopping cart</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
    <form id="form1" runat="server">
   <div id="page">
	<div id="header">
		<h1>plum.shop, the JavaScript shopping cart</h1>
		<a href="http://codecanyon.net/item/plumshop-a-jquery-shopping-cart/427746?ref=robocreatif">Grab plum.shop for only $6</a>
	</div>
	<div id="main">
		<div id="details">
		<p>
			plum.shop is a <strong>JavaScript shopping cart</strong> built on
			the jQuery library. It's super easy to set up, has support for
			just about any necessity in an e-commerce store, and at <strong>less
			than 25 KB</strong>, you get quite a bit of bang for a very small
			footprint.
		</p>
		<h2 id="features">plum.shop features</h2>
		<ul>
			<li><strong>AJAX-ready.</strong> Pages using plum.shop can be loaded with AJAX without calling the plugin again</li>
			<li>Build an entire store with simple, <strong>straightforward HTML markup</strong></li>
			<li>Over <strong>30 customizable options</strong> and callback functions</li>
			<li><strong>Multiple tax brackets</strong> for countries, regions and local taxes</li>
			<li><strong>Multiple shipping</strong> options</li>
			<li>5 included checkout methods including custom checkout, <strong>PayPal</strong>, <strong>Google</strong>, <strong>Amazon</strong> and <strong>Skrill</strong></li>
			<li>3 cart storage methods including <strong>HTML5 localStorage</strong>, <strong>browser cookies</strong>, and <strong>server-side sessions</strong></li>
			<li>Set up multiple carts per page</li>
		</ul>
		<h2 id="localization">Localization</h2>
		<ul>
			<li>Custom, extremely easy-to-use <strong>currency formatting</strong></li>
			<li><strong>Geolocation</strong> for taxes</li>
		</ul>
		<h2 id="shipping">Fine-tuned shipping</h2>
		<ul>
			<li>Flat, fixed, variable or range shipping types.</li>
			<li>Set costs in <strong>varying shipping brackets</strong> using the range type</li>
		</ul>
		<h2 id="taxes">Powerful tax options</h2>
		<ul>
			<li>Single tax rate</li>
			<li>Multiple taxes on a single order</li>
			<li><strong>Regional taxes</strong> based on your customer's location</li>
			<li>Use <strong>VAT</strong> or <strong>sales tax</strong></li>
		</ul>
		<h2 id="options">Unlimited product options</h2>
		<ul>
			<li>Offer <strong>unlimited options</strong> for each of your products</li>
			<li><strong>Automatically generate SKU numbers</strong> for various option combinations</li>
			<li>Adjust prices per option</li>
		</ul>
		<hr>
		<h2 id="browser-requirements">Browser requirements</h2>
		<ul>
			<li>Mozilla Firefox 2 or newer</li>
			<li>Google Chrome</li>
			<li>Apple Safari 3 or newer</li>
			<li>Opera 9 or newer</li>
			<li>Microsoft Internet Explorer 7 or newer</li>
		</ul>
		<h2 id="software-requirements">Software requirements</h2>
		<ul>
			<li>jQuery 1.4.1 or newer</li>
		</ul>
		<hr>
		<h2 id="usage">Pretty sweet. How do I use it?</h2>
		<p>
			<strong>Set up is a quick 4 steps.</strong> Plum will work on any
			page where you load the necessary scripts, so you can have a gallery
			of products, single product pages, and your checkout page all
			separated.
		</p>
		<ol>
			<li>
				<p>Include jQuery and plum.shop.</p>
				<pre>&lt;script src="/js/jquery.js"&gt;&lt;/script&gt;
&lt;script src="/js/jquery.plum.shop.js"&gt;&lt;/script&gt;</pre>
			</li>
			<li>
				<p>
					Set up your products. Any element with a "product" class
					(this can be changed) is a cart container. You can have one,
					ten, a thousand containers on a page.
				</p>
				<pre>&lt;div class="product" id="sku-01"&gt;
	&lt;span class="title"&gt;My awesome product&lt;/div&gt;
	&lt;span class="price"&gt;$10.00&lt;/div&gt;
	&lt;input class="purchase"
		type="button"
		value="Add to cart"&gt;
&lt;/div&gt;</pre>
			</li>
			<li>
				<p>Create a container for the cart display.</p>
				<pre>&lt;div id="cart"&gt;&lt;/div&gt;</pre>
			</li>
			<li>
				<p>
					Include your cart's configuration. This is where you can
					customize how each item looks in the cart, create multiple
					carts, and add any options you may need.
				</p>
				<pre>&lt;script&gt;
$('#cart').plum('shop', {
	cartitem: '{title} &amp;mdash; {pricesingle} '
		+ '&amp;times; {quantity} &amp;mdash; '
		+ '{pricetotal}',
	paypaluser: 'hello',
	paypaldomain: 'robocreatif.com'
});
&lt;/script&gt;</pre>
			</li>
		</ol>
		<hr>
		<h2 id="notes">Notes</h2>
		<p class="note">
			Please remember that plum.shop is pure JavaScript. While every
			precaution has been taken to ensure the validity of items in your
			shopping cart, any JavaScript can be easily manipulated. Therefore,
			we recommend that you always verify the contents of an order before
			finalizing the transaction. You can do this by utilizing one of the
			third-party payment gateway's notification services, like
			<a href="https://www.paypal.com/ipn">PayPal's IPN</a>.
		</p>
		<p class="note">
			plum.shop is a shopping cart and only a shopping cart. It serves to
			store products that your customers have added to the cart, display
			and calculate totals and discounts, and help out with the checkout
			process. Categories, product detail pages, and anything else you
			might need in your store must be added in yourself.
		</p>
		<p class="note">
			Finally, this page is a <em>demonstration</em> of some of
			plum.shop's capabilities. It is not intended to be a drop-in
			solution for an e-commerce store. Some assembly required. (Don't
			worry, there's a thorough documentation file.)
		</p>
		</div>
		<div id="products">
			<ul>
				<li class="product" id="tank">
					<img src="images/tank.png" alt="">
					<p>
						<span class="title">Tank</span>
						<span class="price">$13.00</span><br>
						<input class="purchase" type="button" value="Add to cart">
					</p>
				</li>
				<li class="product" id="long-sleeve">
					<img src="images/long-sleeve.png" alt="">
					<p>
						<span class="title">Long Sleeve</span>
						<span class="price">$19.00</span><br>
						<input class="purchase" type="button" value="Add to cart">
					</p>
				</li>
				<li class="product" id="pants">
					<img src="images/pants.png" alt="">
					<p>
						<span class="title">Pants</span>
						<span class="price">$22.00</span><br>
						<input class="purchase" type="button" value="Add to cart">
					</p>
				</li>
				<li class="product" id="skirt">
					<img src="images/skirt.png" alt="">
					<p>
						<span class="title">Skirt</span>
						<span class="price">$15.00</span><br>
						<input class="purchase" type="button" value="Add to cart">
					</p>
				</li>
			</ul>
			<hr>
			<ul>
				<li class="product details" id="shoe">
					<img src="images/shoe.png" alt="">
					<div>
						<h3 class="title">Shoe</h3>
						<span class="price">$42.00</span>
						<p class="description">
							The shoe's description. It's not very informative,
							but it sure is a description.
						</p>
						<hr>
						<label>Size</label>
						<select class="size">
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
						</select><br>
						<label>Color</label>
						<select class="color">
							<option value="cyan">Cyan</option>
							<option value="magenta">Magenta</option>
							<option value="yellow">Yellow</option>
							<option value="black">Black</option>
						</select>
						<p><input class="purchase" type="button" value="Add to cart"></p>
					</div>
				</li>
			</ul>
			<div id="cart"></div>
			<a class="empty" href="#">Empty cart</a>
			<div id="totals">
				<p>
					In this demo, you can use the discount codes <code>10PERCENT</code>
					and <code>10DOLLARS</code>. Tax is set to 8% of the subtotal
					for US residents.
				</p>
				<label>Discount code</label> <input class="discount"><br>
				<select id="shippingoptions" class="shipping">
					<option>Select a shipping method</option>
				</select><br>
				<p>
					<label>Total items</label> <span class="cart-quantity">0</span><br>
					<label>Subtotal</label> <span class="cart-subtotal">$0.00</span><br>
					<label>Shipping</label> <span class="cart-shipping">$0.00</span><br>
					<label>Tax</label> <span class="cart-tax">$0.00</span><br>
					<label>Discount</label> <span class="cart-discount">$0.00</span><br>
					<label>Total</label> <span class="cart-total">$0.00</span>
				</p>
			</div>
			<div id="checkout">
				<input class="checkout" type="button" value="Custom checkout">
				<input class="amazon" type="button" value="Amazon">
				<input class="google" type="button" value="Google">
				<input class="paypal" type="button" value="PayPal">
				<input class="skrill" type="button" value="Skrill">
			</div>
		</div>
	</div>
	<div id="footer">
		&copy; 2011-2012 Jivallo
	</div>
</div>
    </form>
</body>
</html>
